"use client";
import { useTranslations } from "next-intl";
import Image from "next/image";
import { useParams, useRouter } from "next/navigation";

export default function Measurement() {
  const t = useTranslations("home");
  const params = useParams();
  const router = useRouter();
  const dataSource = [
    {
      title: "measurement.product-1.title",
      info: "measurement.product-1.info",
      url: "http://i18nport.dongsongkeji.com.cn/upload/05ff7ad0-609a-53e9-9885-bcedf3f96d92.png",
      path: `/${params.locale}/measurement/${t("four.product")}`,
      margin: false,
    },
    {
      title: "measurement.product-2.title",
      info: "measurement.product-2.info",
      url: "http://i18nport.dongsongkeji.com.cn/upload/05ff7ad0-609a-53e9-9885-bcedf3f96d92.png",
      path: `/${params.locale}/measurement/${t("four.product")}`,
      margin: true,
    },
  ];
  return (
    <div className={"position-container"}>
      <div className={"flex justify-between my-6 h-80 overflow-hidden"}>
        <div className={"flex-1 pr-10"}>
          <h1 className={"text-3xl border-b-2 py-3"}>{t("four.product")}</h1>
          <p className={"text-2xl mt-10 mb-4"}>{t("four.product-title")}</p>
          <p className={"pr-16 text-gray-500 text-over-6"}>{t("four.product-info")}</p>
        </div>
        <div
          style={{
            background:
              "url('https://omo-oss-image.thefastimg.com/portal-saas/ngc202211220002/cms/image/9ce9f1e9-8b23-46d8-b96c-c50f78f7074f.jpg')",
            backgroundPosition: "100% 100%",
          }}
          className={
            "w-96 h-96 justify-self-end flex justify-center items-center"
          }
        >
          <img
            width={180}
            height={180}
            className={
              "hover:scale-100 scale-90 max-w-full max-h-full object-contain transition-all"
            }
            src="http://i18nport.dongsongkeji.com.cn/upload/05ff7ad0-609a-53e9-9885-bcedf3f96d92.png"
            alt=""
          />
        </div>
      </div>

      <div className={`pb-10 overflow-hidden`}>
        <p className={`text-xl mt-16 font-semibold`}>{t("series")}</p>
        <ul className={`flex flex-wrap`}>
          {dataSource.map((item) => {
            return (
              <li
                key={item.title}
                onClick={() =>
                  router.push(`${item.path}?series=${t(item.title)}`)
                }
                className={`w-96 group ${
                  item.margin && "mx-10"
                } hover-bottom-line shadow hover:shadow-xl transition-all mt-4`}
              >
                <div
                  className={
                    "bg-gray-100 py-4 px-10 h-full rounded overflow-hidden"
                  }
                >
                  <Image
                    className={`my-6 group-hover:scale-105 transition-all duration-500 cursor-pointer`}
                    width={300}
                    height={300}
                    src={item.url}
                    alt=""
                  ></Image>
                  <h1 className={`my-3 text-xl font-semibold`}>
                    {t(item.title)}
                  </h1>
                  <p className={"text-over-3"}>{t(item.info)}</p>
                </div>
              </li>
            );
          })}
        </ul>
      </div>
    </div>
  );
}
